<template>
    <div class="publishOrder">
        <div class="fix-header">
            <div class="backPage" @click="goBack">
                <image class="arrow_left" :src="imgPath('back.png')"></image>
                <text class="back col_fff medium" >返回</text>
            </div>
            <div class="search">
                <input type="text" return-key-type="search" v-model="searchText"  class="fix-search" placeholder="请输入关键字"  @return="show($event)">
                <div class="fix-img">
                    <image :src="imgPath('search_icon.png')" class="img"></image>
                </div>
            </div>
            <text class="settle" @click="publishGood">发布</text>
        </div>
        <div class="header-topic">
            <div class="topic-item sale" @click="groundinggood(1)">
                <text class="topic-text" :class="[active ? 'activeColor': '']">出售中</text>
            </div>
            <div class="topic-item" @click="groundinggood(2)">
                <text class="topic-text" :class="[active1 ? 'activeColor': '']">已下架</text>
            </div>
        </div>
        <list @loadmore="loadMoreContent" v-if="dataList && dataList.length > 0">
            <cell class="wrap" v-for="item in dataList" :key="item.id">
                <div class="content-wrap">
                    <div class="content-item">
                        <div class="content-header">
                            <text class="time">发布时间： {{item.createTime}}</text>
                            <text class="good">商品</text>
                        </div>
                        <div class="content-body" @click="pushToSaleStoreDetail(item.id)">
                            <image :src="item.topPicture" class="goodImg"></image>
                            <div class="content-right">
                                <text class="name">{{item.goodsName}}</text>
                                <div class="content-text">
                                    <text class="price">￥ {{item.discountPrice ? item.discountPrice : item.price}}{{'/' + item.priceUnit}}</text>
                                    <text class="num">月销:{{item.sales}}</text>
                                    <text class="num">库存:{{item.inventory ? item.inventory : 0}}</text>
                                </div>
                            </div>
                        </div>
                        <div class="beizhu">
                            <text class="beizhu-name">备注：</text>
                            <text class="beizhu-name">{{item.priceRemark ? item.priceRemark : '暂无'}}</text>
                        </div>
                        <div class="btn">
                            <text class="update" v-if="active" @click="updateInfo(item.id)">修改信息</text>
                            <text class="delete" v-if="active" @click="undercarriageGood(item.id)">下架商品</text>
                            <text class="update" v-if="active1" @click="del(item.id)">删除商品</text>
                            <text class="delete" v-if="active1" @click="groundGoods(item.id)">重新上架</text>
                        </div>
                    </div>
                </div>
                <div class="xian"></div>
            </cell>
        </list>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import {grounding, groundGood, deleteGood} from '@/api/store'
import { WxcLoading } from 'weex-ui'
// const storage = weex.requireModule('storage')
const modal = weex.requireModule('modal')
export default {
  name: 'publishOrder',
  data () {
    return {
      pageNo: 1,
      pageSize: 6,
      dataList: [],
      hasMore: true,
      active: true,
      searchText: '',
      active1: false,
      needMask: true, // 显示蒙版
      selectType: 1, // 显示的类型
      loadingShow: true // loading
    }
  },
  mounted: function () {
    const that = this
    that.getDataList()
  },
  methods: {
    getDataList () {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        shelves: that.selectType,
        dateSort: 1,
        keyword: that.searchText
      }
      that.loadingShow = true
      that.$api.get(grounding, params, function (res) {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.dataList = that.dataList.concat(list)
      }, function () {
        that.loadingShow = false
      }, true)
    },
    goBack () {
      this.$router.go(-1)
    },
    groundinggood (type) {
      const that = this
      that.selectType = type
      if (that.selectType === 1) {
        that.active = true
        that.active1 = false
      } else {
        that.active = false
        that.active1 = true
      }
      that.pageNo = 1
      that.dataList = []
      that.hasMore = true
      that.getDataList()
    },
    // 商品下架
    undercarriageGood (goodId1) {
      const that = this
      that.loadingShow = true
      that.$api.post(groundGood + '/' + goodId1, {}, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '商品下架成功'
        })
        let params = {
          pageNo: that.pageNo,
          pageSize: that.pageSize,
          shelves: 1,
          keyword: that.searchText
        }
        that.dataList = []
        that.loadingShow = true
        that.$api.get(grounding, params, function (res) {
          that.loadingShow = false
          that.dataList = res.data.records
        }, function () {
          that.loadingShow = false
        }, true)
      }, function () {
        that.loadingShow = false
      })
    },
    // // 商品上架
    groundGoods (goodId2) {
      const that = this
      that.loadingShow = true
      that.$api.post(groundGood + '/' + goodId2, {}, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '商品上架成功'
        })
        that.dataList = []
        let params = {
          pageNo: that.pageNo,
          pageSize: that.pageSize,
          shelves: 2,
          keyword: that.searchText
        }
        that.$api.get(grounding, params, function (res) {
          that.dataList = res.data.records
        }, function () {
        }, true)
      }, function () {
        that.loadingShow = false
      })
    },
    del (goodId3) {
      const that = this
      that.loadingShow = true
      that.$api.post(deleteGood + '/' + goodId3, {}, function (res) {
        that.loadingShow = false
        modal.toast({
          message: '删除商品成功'
        })
        let params = {
          pageNo: that.pageNo,
          pageSize: that.pageSize,
          shelves: 2,
          keyword: that.searchText
        }
        that.dataList = []
        that.$api.get(grounding, params, function (res) {
          that.dataList = res.data.records
        }, function () {
        }, true)
      }, function () {
        that.loadingShow = false
      })
    },
    pushToSaleStoreDetail (goodId) {
      const that = this
      that.$router.push({path: '/store/saleStoreDetail', query: {goodsId: goodId}})
    },
    updateInfo (itemId) {
      const that = this
      that.$router.push({path: '/store/saleStoreDetail', query: {goodsId: itemId}})
    },
    publishGood () {
      const that = this
      that.$router.push('/store/publishGood')
    },
    // 手机确认键关键字查询
    show (ev) {
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        shelves: 1,
        keyword: that.searchText
      }
      that.loadingShow = true
      that.$api.get(grounding, params, function (res) {
        that.dataList = res.data.records
        that.loadingShow = false
      }, function () {
        that.loadingShow = false
      }, true)
    },
    loadMoreContent () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    }
  },
  components: {
    WxcLoading
  }
}
</script>
<style>
    .publishOrder{
        background-color: rgb(245,245,245);
    }
</style>
<style scoped>
    .fix-header {
        height: 88px;
        padding-top: 14px;
        padding-bottom: 14px;
        align-items: center;
        /*position: relative;*/
        display: flex;
        flex-direction: row;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }

    .backPage {
        flex-direction: row;
        align-items: center;
        height: 88px;
        padding-right: 32px;
        padding-left: 24px;
    }
   .fix-img{
       flex-direction: row-reverse;
       justify-content: center;
       align-items: center;
       width:62px;
       height:60px;
       background-color: #fff;
   }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }

    .back {
        font-size: 34px;
        line-height: 88px;
        color: #fff;
    }
    .fix-search {
         height: 60px;
         width: 430px;
         border: none;
         background-color: #fff;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         font-size: 24px;
         padding-left: 15px;
         color: rgb(206,206,206)
     }

    .search {
        align-items: center;
        /*display: flex;*/
        flex-direction: row;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-color: rgb(206, 206, 206);
        border-width: 1px;
        border-style: solid;
        width: 496px;
        height: 63px;
        background-color: #fff;
    }
    .carimg {
        width: 40px;
        height: 40px;
        margin-left: 20px;
        padding-right: 24px;
        padding-left: 24px;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 34px;
        line-height: 88px;
        color: #fff;
    }
    .img {
        width: 28px;
        height: 28px;
    }
    .settle {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 28px;
        margin-left: 5px;
        color: rgb(206,206,206)
    }
    .header-topic{
        padding-top:11px;
        padding-bottom:11px;
        padding-left: 25px;
        padding-right:25px;
        height:88px;
        flex-direction: row;
        background-color: #Fff;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(245,245,245);
         }
    .topic-item{
        width: 350px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .topic-text{
        font-size:26px;
        color:rgb(134,134,134);
        font-family:medium
    }
    .sale{
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: rgb(206,206,206);
    }
    .content-wrap{
        padding-left: 25px;
        padding-right:25px;
        background-color: #fff;
    }
    .content-item{
        padding-top:25px;
        padding-bottom:15px;
        margin-top: 16px;
        background-color:#fff
    }
    .content-header{
        flex-direction: row;
        justify-content: space-between;
        padding-bottom:22px;
    }
    .time{
        font-size: 28px;
        color:rgb(134,134,134)
    }
    .good{
        font-size:24px;
        color:rgb(206,206,206)
    }
    .goodImg{
        width:118px;
        height:118px;
        border-radius: 9px;
    }
    .content-body{
        width: 700px;
        background-color: rgb(245,245,245);
        padding: 16px;
        flex-direction: row
    }
    .content-right{
        flex-direction: column;
        margin-left:15px;
        flex:1;
        width: 525px;
        overflow: hidden;
    }
    .name{
        font-size: 28px;
        color:rgb(70,70,70);
        font-weight: bold;
        lines:1;
        width: 525px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .content-text{
        flex-direction: row;
        align-items: center;
        margin-top:30px;
    }
    .price{
        font-size:42px;
        color:rgb(254,203,1);
        font-weight:bold;
        margin-right: 15px;
    }
    .num{
        font-size: 24px;
        color:rgb(134,134,134);
        margin-right: 15px;
    }
    .beizhu{
        padding-bottom: 20px;
        padding-top: 20px;
        flex-direction: row;
        border-bottom-color: rgb(235,235,235);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .beizhu-name{
        font-size: 24px;
        color: rgb(134,134,134);
    }
    .btn{
        flex-direction: row;
        justify-content: flex-end;
        padding-top: 15px;
    }
    .update{
        padding-left:33px;
        padding-right:33px;
        height:60px;
        line-height:60px;
        font-size:26px;
        color:rgb(70,70,70);
        font-family:medium;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(206,206,206);
        border-radius:10px;
    }
    .delete{
        padding-left:33px;
        padding-right:33px;
        height:60px;
        line-height:60px;
        font-size:26px;
        color:#fff;
        background-color:rgb(84,92,114);
        font-family:medium;
        border-radius:10px;
        margin-left: 15px;
    }
    .xian{
        width:750px;
        height: 16px;
        background-color:rgb(245,245,245)
    }
    .activeColor{
        color: rgb(254,203,1);
        font-weight:bold;
        font-size: 26px;
        border-bottom-width:5px ;
        border-bottom-style: solid;
        border-bottom-color:rgb(254,203,1);
        height: 80px;
        line-height: 80px;
    }
</style>
